<template>
  <div class="home">
    <el-row>
      <el-col :span="10">
        <div class="grid-content bg-purple">
          <el-input
            placeholder="请输入要搜索用户的电话号码"
            prefix-icon="el-icon-search"
            v-model="userphone" class="input_">
          </el-input>
          <el-button type="success" class="subang" @click="Rebate(1)" plain>正常分红</el-button>
          <el-button type="warning" class="subang" @click="Rebate(2)" plain>非正常</el-button>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="grid-content bg-purple-light">
          <el-date-picker
            v-model="mouthTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
          <el-select v-model="mouth" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
        </div>
      </el-col>
    </el-row>
    <div class="class_test">非正常（该记录用户未指派1级经销商！该记录只作为凭证,并没有资金产生！）</div>
    <div class="autd animated slideInRight">
      <el-table :data="datatitle" border style="width: 100%" v-loading="loading2"
                element-loading-text="拼命加载中">
        <el-table-column prop="remark" label="消费用户" width="500">
        </el-table-column>
        <el-table-column prop="money" label="返利金额" width="200">
        </el-table-column>
        <el-table-column prop="nick_name" label="收益用户" width="130">
        </el-table-column>
        <el-table-column prop="phone" label="收益用户电话" width="140">
        </el-table-column>
        <el-table-column prop="created_at" label="充值时间" width="200">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看订单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="fanlipage"
        :current-page="cur"
        :page-size="pagesize"
        :page-count="currentPage4"
        layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </div>

    <el-dialog title="订单信息" :visible.sync="order_info">
      <orderinfo :order="orderInfo"></orderinfo>
    </el-dialog>
  </div>
</template>

<script>
  import  orderinfo from  "cs/public/orderinfo";//
  export default {
    components: {
      orderinfo
    },
    data(){
      return {

        total: 1,        //总条数
        currentPage4: 1, //总页数
        cur: 1,           //当前页数
        urlimg: this.$IMG,
        Province: false,   //省份状态
        loading2: false,
        datatitle: [],     //当页数据
        userphone: '',     //用户电话号码
        rebatetime: '',
        year: '',   //年
        mouthTime: '',  //月
        pagesize: this.$store.state.attribute.page, //每页条数
        timeflag: 1,  //搜索状态
        options: [{
          value: '搜索日',
          label: '搜索日'
        }, {
          value: '搜索月',
          label: '搜索月'
        }, {
          value: '搜索年',
          label: '搜索年'
        },],
        mouth: '',
        limtflag: '',
        pageflag: 1,
        order_info: false,// 订单状态
        orderInfo: [],// 订单信息
        order_loading2: false,
        dataobject: {},
      }
    },
    methods: {
      handleClick(row){  //查看订单
        this.orderInfo = [];
        this.order_loading2 = true;
        this.order_info = true;
        this.http.post({
          'api': 'adminSerachOrder',
          'data': {
            "data": {
              'orderid': row.order_id,//目标用户id
            }
          },
        }).then((res) => {
          this.order_loading2 = false;
          this.orderInfo.push(res.data.data)
        }, (err) => {
          this.$h.Ed(err, this);
        })
      },

      Rebate(e){  //电话搜索  获取我的分红返利
        this.pageflag = 0;
        this.timeflag = 1;
        this.loading2 = true;
        this.http.post({
          'api': 'searchProfitlog',
          'data': {
            "data": {
              'phone': this.userphone,//目标用户id
              'status': 1,
              'limit': this.pagesize
            }
          },
          'page': e,
        }).then((res) => {
          this.fenhongshuju(res.data);

        }, (err) => {
          this.$h.Ed(err, this);
        })
      },
      Appendzero(obj) { //  日期 不够两位数 就在前面加一个0
        if (obj < 10) return "0" + "" + obj;
        else return obj;
      },
      RebateData(e, r){//时间搜索
        this.timeflag = 2;
        this.pageflag = 0;
        var a = new Date(this.mouthTime);
        var yeal = a.getFullYear();  //年
        var Month = a.getMonth() + 1;  //月
        var data = a.getFullYear() + '-' + this.Appendzero(Month) + '-' + this.Appendzero(a.getDate());  //日
        this.dataobject = {};
        switch (r) {
          case '搜索日':
            this.limtflag = '搜索日';
            this.dataobject = {
              "year": yeal,
              "type": {
                "month": Month,
                'date': data
              },
              'limit': this.pagesize
            };
            break;
          case '搜索月':
            this.limtflag = '搜索月';
            this.dataobject = {
              "year": yeal,
              "type": {"month": Month},
              'limit': this.pagesize
            };
            break;
          case '搜索年':
            this.limtflag = '搜索年';
            this.dataobject = {
              "type": {"year": yeal},
              'limit': this.pagesize
            };
            break;
        }
        this.http.post({
          'api': 'getProfitlog',
          'data': {
            "data": this.dataobject
          },
          'page': e,
        }).then((res) => {
          this.fenhongshuju(res.data);
        }, (err) => {
          this.$h.Ed(err, this);
        })
      },

      fanlipage(val){//返利分页
        this.loading2 = true;
        console.log(this.timeflag+"--"+this.pageflag);
        if (this.pageflag != 1) {
          switch (this.timeflag) {
            case 1://电话搜索  获取我的分红返利
              this.Rebate(val);
              break;
            case 2:  //时间搜索
              this.RebateData(val, this.limtflag);
              break;
          }
        }
      },
      fenhongshuju(data) {//分红数据处理
        this.loading2 = false;
        this.total = data.total; //数据总的条数
        this.currentPage4 = data.last_page;
        this.datatitle = data.data;
      },

    },
    watch: {
      rebatetime(r, i){
        console.log(r);
        if (r != i) {
          this.timesearch();
        }
      },
      mouth(r, i){
        this.RebateData(1, r)
      },
    },
    computed: {
      //计算属性
    },
    created(){

    },
    mounted()
    {
        console.log('qweq');
      var a = new Date();
      var yeal = a.getFullYear();  //年
      var Month = a.getMonth() + 1;  //月
      var data = a.getFullYear() + '-' + this.Appendzero(Month) + '-' + this.Appendzero(a.getDate());  //日
      this.dataobject = {
        "year": yeal,
        "type": {
          "month": Month,
          'date': data
        },
        'limit': this.pagesize
      };
      this.timeflag = 2;
      this.http.post({
        'api': 'getProfitlog',
        'data': {
          "data": this.dataobject
        },
        'page': 1,
      }).then((res) => {
        console.log(res.data);
        this.fenhongshuju(res.data);
      }, (err) => {
        this.$h.Ed(err, this);
      })
      //生命周期
    }
  }
</script>
<style scoped>
  .home {
    width: 100%;
    height: 100%;
  }

  .el-dialog {
    width: 100%;
  }

  .el-row {
    margin-bottom: 20px;

  &
  :last-child {
    margin-bottom: 0;
  }

  }
  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    /*background: #99a9bf;*/
  }

  .bg-purple {
    /*background: #d3dce6;*/
  }

  .bg-purple-light {
    /*background: #e5e9f2;*/
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .input_ {
    width: 60%;
    /*margin-top: 15px;*/
  }

  .class_test {
    width: 100%;
    height: 30px;
  }
</style>
